feat: add DataTable component (@fehmer)#7397
Conversation
|
All alerts resolved. Learn more about Socket for GitHub. This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored. |
d4cfd81 to
917e717
Compare
|
Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes. |
0386015 to
e307c44
Compare
e307c44 to
1e10edb
Compare
There was a problem hiding this comment.
Pull request overview
Adds a SolidJS DataTable implementation based on TanStack Solid Table, including responsive column visibility and persistent sorting.
Changes:
- Add
@tanstack/solid-tabledependency (and lockfile updates). - Introduce new
DataTable,Table, andTableColumnHeaderUI components. - Add TanStack table column meta typing (breakpoint + cell attributes) and export
BreakpointKeyfor reuse.
Reviewed changes
Copilot reviewed 6 out of 8 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Locks new TanStack table dependency and transitive updates. |
| frontend/package.json | Adds @tanstack/solid-table to frontend deps. |
| frontend/tsconfig.json | Adds an extra include entry for .d.ts (currently suspicious/redundant). |
| frontend/src/ts/types/tanstack-table.d.ts | Module augmentation for column meta (breakpoint, cellMeta). |
| frontend/src/ts/signals/breakpoints.ts | Exports BreakpointKey type for table column meta. |
| frontend/src/ts/components/ui/table/TableColumnHeader.tsx | New sortable column header button component. |
| frontend/src/ts/components/ui/table/Table.tsx | New styled table primitive components. |
| frontend/src/ts/components/ui/table/DataTable.tsx | New DataTable wiring sorting + responsive visibility + cell meta attributes. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
|
Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes. |
|
Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes. |
|
Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes. |
There was a problem hiding this comment.
Sorting UI is gated on typeof columnDef.header === "string". If a sortable column provides a JSX/header renderer (common in TanStack), the column will be sortable in state but not clickable in the UI. Gate only on getCanSort() (and !header.isPlaceholder) and render the header label via flexRender(...) inside the button.
following https://www.solid-ui.com/docs/components/data-table